<template>
  <div class="main">
    <div class="outDiv">
      <go-back v-show="!hideHeader" :white='true' topTitle="我的提问" :hasTitle="true"></go-back>
      <div class="tabWrap">
        <tab :line-width="8" default-color="#222" class="tabItem">
          <tab-item @on-item-click="onItemClick" :selected="choItem == 0">专家问答</tab-item>
          <tab-item @on-item-click="onItemClick" :selected="choItem == 1">院校答疑</tab-item>
        </tab>
      </div>
      <div>
				<keep-alive>		
					<component v-bind:is="tabView"></component>	
				</keep-alive>
			</div>
    </div>
  </div>  
</template>

<script>
import goBack from '~/components/goBack'
import { Tab, TabItem } from 'vux'
import ls from 'store2';
import specialistQusAndAns from './specialistQusAndAns'
import schoolAns from './schoolAns'
export default {
  components: {
    goBack,
    Tab,
    TabItem,
    specialistQusAndAns,
    schoolAns
  },
  data() {
    return {
      tabView: ls.get('myQuesChoItem') == 1 ? 'schoolAns' : 'specialistQusAndAns',
      choItem: ls.get('myQuesChoItem') ? ls.get('myQuesChoItem') : 0,
      hideHeader: false
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
  },
  mounted() {
    this.$visit("MyQuestions")
  },
  methods: {
    onItemClick(item) {
      this.choItem = item;
      if (item == 0) {
        this.tabView = 'specialistQusAndAns'
      } else {
        this.tabView = 'schoolAns'
      }
      ls.set('myQuesChoItem', item);
    },

  },
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    background: #FFF;
    height: 100vh;

    .tabWrap {
      height: 1.03rem;
      position: absolute;
      background: #fff;
      z-index: 10;
      width: 100%;
      padding: 0 1rem;
      padding: 0 0.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid #E5E8ED;

      .vux-tab .vux-tab-item {
        background: #fff;
        font-size: 0.3rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: #222;
      }

      /deep/ .vux-tab .vux-tab-ink-bar {
        width: 0.48rem;
        background: @mainColor !important;
        margin: 0 auto;
        border-radius: 4px;
      }


    }

  }
</style>
